<template>
  <view class="balance">
    <view class="content" v-for="item in baList" :key="item.id">
      <view class="content-left">
        <view class="left-top">{{ item.title }}</view>
        <view class="left-bottom">{{ item.time }}</view>
      </view>
      <view
        class="content-right"
        :style="{ color: item.type ? 'green' : 'red' }"
        >{{ item.type ? "+" : "-" }}{{ item.price }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baList: [
        {
          id: 1,
          title: "消费",
          time: "2021/09/01 15:11:34",
          price: 100,
          type: 0,
        },
        {
          id: 2,
          title: "充值",
          time: "2021/09/01 15:11:34",
          price: 100,
          type: 1,
        },
        {
          id: 3,
          title: "会员分佣",
          time: "2021/09/01 15:11:34",
          price: 100,
          type: 1,
        },
        {
          id: 4,
          title: "代理商分佣",
          time: "2021/09/01 15:11:34",
          price: 100,
          type: 1,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.balance {
  background-color: #fff;
  .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    line-height: 50rpx;
    .content-left{
      .left-bottom{
        color: #b0b0b0;
        font-size: 28rpx;
      }
    }
  }
}
</style>
